<template>
  <div id='box'>
    <el-empty :image="path" :image-size='100' :description="text">
      <template slot='default'>
        <div class='jumptext'>
          页面将在<span style="font-weight:bold;">{{time}}</span>秒后自动跳转
        </div>
      </template>
      <el-button @click="jump">立即跳转</el-button>
    </el-empty>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: '',// publish or draft
      path: '',//图片路径
      text: '',//文字描述
      time: '3',//倒计时
      timer: null//定时器
    }
  },
  mounted() {
    this.type=this.$route.params.type
    this.sendCode()
    if(this.type=='publish') {
      this.path=require('@/assets/publish.png')
      this.text="文章发布成功"
    } else if(this.type=='draft') {
      this.path=require('@/assets/draft.png')
      this.text="文章已保存至草稿箱"
    }
  },
  methods: {
    //倒计时
    sendCode() {
      this.timer=setInterval(() => {
        //创建定时器
        if(this.time==0) {
          this.clearTimer();  //关闭定时器
          this.jump()
        } else {
          this.loading();
        }
      },1000);
    },
    loading() {
      //启动定时器
      this.time--;  //定时器减1
    },
    clearTimer() {
      //清除定时器
      clearInterval(this.timer);
      this.timer=null;
    },
    jump() {
      this.clearTimer()
      this.$router.push('/scenery/blogs')
    }
  }
}
</script>

<style lang="scss" scoped>
#box {
  background-color: rgba(34, 52, 87, 0.6);
}
::v-deep .el-empty {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -0%);
  height: 40%;
  width: 60%;
  background-color: rgba(34, 52, 87, 0.8);
  border: 1px dashed #1e75a4;
  user-select: none;
}
::v-deep .el-empty__description p {
  font-size: 18px;
  letter-spacing: 1px;
}
::v-deep .el-button {
  width: 160px;
  height: 40px;
  font-size: 16px;
  border-radius: 20px;
}
.jumptext {
  color: #f5f8fd;
  font-size: 18px;
  margin-bottom: 16px;
  letter-spacing: 1px;
}
</style>